/**
 * 商品方法显示
 */

import React from 'react'
import { Popup } from '../Popup'
import { View, Image } from '@tarojs/components'
import Price from '@/components/Price'

import './index.scss'
import { ButtonEle, ButtonType } from '../Buttton'
import { Stepper } from '../Stepper'


export interface IGoodsProps {
    title: string
    price: number
    oldPrice?: number
    discount?: number
    img: string,
    number: number,
    imgRender?: () => React.ReactElement
    descRender?: () => React.ReactElement
    desc?: string
    onAdd?: (num: number) => void
    customStyle?: React.CSSProperties
    readonly?: boolean
    vis: boolean
    onClose: () => void

}
export const GoodsViewEle: React.FC<IGoodsProps> = (
    prop
) => {
    return (
        <Popup
            visible={prop.vis}
            position="center"
            round
            onClose={prop.onClose}
            closeOnClickOverlay
            customStyle={{
                borderBottomLeftRadius: 0,
                borderBottomRightRadius: 0
            }}
        >
            <View className="xxm-goods-view-ele">
                <View className="xxm-goods-view-ele__header">
                    <Image
                        src={prop.img}
                    />
                </View>
                <View className="xxm-goods-view-ele__content">
                    <View className="xxm-goods-ele__title xxm-ellipsis">{prop.title}</View>
                    <View className="xxm-goods-ele__desc">{
                        prop.descRender && typeof prop.descRender === 'function' ?
                            prop.descRender() : prop.desc
                    }</View>

                    <View className="xxm-goods-ele__pricebox">
                        <View className="xxm-goods-ele__price">
                            <Price price={prop.price} type={'sale'}></Price>

                            <Price price={prop.oldPrice} type={'lineation'}></Price>
                            {
                                prop.discount &&
                                <View className="xxm-goods-ele__dis">{prop.discount}折</View>
                            }
                            {
                                prop.readonly && prop.number ? <View className="xxm-goods-ele__number xxm-goods-ele__add">x{prop.number}</View> :
                                    <View className="xxm-goods-ele__add "
                                    >

                                        {/* <Icon name="add-circle" color="#F43443" size={24}></Icon> */}
                                        <Stepper value={prop.number}
                                            disabled={prop.readonly}
                                            onChange={(type, num) => {
                                                //  if(type === 'plus'){
                                                prop.onAdd && prop.onAdd(num)

                                                //  }
                                            }}
                                        />
                                    </View>
                            }
                        </View>
                    </View>

                </View>
                <View className="xxm-goods-view-ele__footer">
                    <ButtonEle
                        type={ButtonType.DANGE}
                        block
                        square
                        onClick={() => {
                            console.log('xxxx')
                            prop.onClose()
                        }}
                    >关闭</ButtonEle>
                </View>
            </View>
        </Popup>
    )
}